import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { ShopOutlined, PoweroffOutlined, DashboardOutlined, CameraOutlined, SettingOutlined, UserOutlined, DesktopOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme, Button, message } from 'antd';
const { Header, Content, Footer, Sider } = Layout;


function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
const items = [
    getItem('管理中心', 'home', <DashboardOutlined />),
    getItem('系统设置', 'system', <SettingOutlined />, [
        getItem('菜单管理', 'menu'),
        getItem('角色管理', 'role'),
        getItem('管理员管理', 'admin'),
    ]),
    getItem('旅游管理', 'trip', <CameraOutlined />, [
        getItem('地区管理', 'region'),
        getItem('景点管理', 'scene'),
        getItem('旅游攻略', 'plain'),
        getItem('美食推荐', 'food'),
        getItem('评论管理', 'comment'),
    ]),
    getItem('商城管理', 'content', <ShopOutlined />, [
        getItem('分类管理', 'category'),
        getItem('商品管理', 'goods'),
    ]),
    getItem('会员管理', 'user', <UserOutlined />, [
        getItem('会员列表', 'member'),
    ]),
    getItem('内容管理', 'content', <DesktopOutlined />, [
        getItem('类目管理', 'classify'),
        getItem('轮播图管理', 'banner'),
    ])
];

export default function Layouts() {
    const redirect = useNavigate();

    const [collapsed, setCollapsed] = useState(false);

    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const jump = (e) => {
        const { key } = e;
        redirect(`/${key}`);
    }

    const logout = () => {
        // 移除本地存储中的登录信息
        localStorage.removeItem('adminLoginInfo');
        message.success('退出成功');
        redirect('/login');
    }

    return (
        <Layout
            style={{
                minHeight: '100vh',
            }}
        >
            {/* 侧边栏 */}
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                {/* logo */}
                <div className="logo-vertical" />
                {/* 导航菜单 */}
                <Menu onClick={jump} theme="dark" defaultSelectedKeys={['home']} mode="inline" items={items} />
            </Sider>

            {/* 右侧主体 */}
            <Layout>
                {/* 头部 */}
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}

                >
                    <Button onClick={logout} style={{ position: 'absolute', right: 10, top: 14 }} type="text" icon={<PoweroffOutlined />}>安全退出</Button>
                </Header>
                {/* 主体内容 */}
                <Content
                    style={{
                        margin: '0 16px',
                    }}
                >

                    {/* 面包屑导航 */}
                    <Breadcrumb
                        style={{
                            margin: '16px 0',
                        }}
                        items={[
                            { title: 'User' },
                            { title: <a href="http://baidu.com" target='_blank'>Bill</a> },
                        ]}
                    >
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                        }}
                    >

                        {/* 子级路由出口 */}
                        <Outlet></Outlet>
                    </div>
                </Content>
                {/* 底部版权 */}
                <Footer
                    style={{
                        textAlign: 'center',
                    }}
                >
                    Ant Design ©2023 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    )
}
